<template>
	<div>
		<div class="main-contanter d-flex a-center">
			<div class="d-flex a-center pl-2">
				<div class="headImg">
					<img :src="loginStatus ? userInfo.avatar : covers" alt="" class="w-100" />
				</div>
				<div v-if="loginStatus">
					<div class="loginName pl-1">{{userInfo.nickname}}</div>
				</div>
				<div v-else>
					<div @click="login" class="loginName pl-1">登录</div>
				</div>
			</div>
		</div>
		<!-- 订单 -->
		<div class="d-flex pt-1 pb-1">
			<div class="d-flex flex-1 flex-column j-center a-center">
				<img src="../assets/images/indexnav/1.png" alt="" class="w-50">
				<div>待付款</div>
			</div>
			<div class="d-flex flex-1 flex-column j-center a-center">
				<img src="../assets/images/indexnav/2.gif" alt="" class="w-50">
				<div>待收货</div>
			</div>
			<div class="d-flex flex-1 flex-column j-center a-center">
				<img src="../assets/images/indexnav/3.gif" alt="" class="w-50">
				<div>待评价</div>
			</div>
			<div class="d-flex flex-1 flex-column j-center a-center">
				<img src="../assets/images/indexnav/4.gif" alt="" class="w-50">
				<div>退换货</div>
			</div>
		</div>
		<divdir></divdir>
		<img src="../assets/images/demo/search-banner.png" alt="" class="w-100" />
		
		<!-- 列表 -->
		<van-cell  is-link>
		  <template #title>
				<div class="d-flex a-center">
					 <img src="../assets/images/indexnav/2.gif" alt="" style="height: 20px;">
					 <div class="pl-1">小米会员</div>
				</div>
		  </template>
		</van-cell>
		<van-cell  is-link>
		  <template #title>
				<div class="d-flex a-center">
					 <img src="../assets/images/indexnav/3.gif" alt="" style="height: 20px;">
					 <div class="pl-1">小米会员</div>
				</div>
		  </template>
		</van-cell>
		<van-cell  is-link>
		  <template #title>
				<div class="d-flex a-center">
					 <img src="../assets/images/indexnav/4.gif" alt="" style="height: 20px;">
					 <div class="pl-1">会员中心</div>
				</div>
		  </template>
		</van-cell>
		<van-cell  is-link>
		  <template #title>
				<div class="d-flex a-center">
					 <img src="../assets/images/indexnav/5.gif" alt="" style="height: 20px;">
					 <div class="pl-1">服务中心</div>
				</div>
		  </template>
		</van-cell>
		<van-cell  is-link>
		  <template #title>
				<div class="d-flex a-center">
					 <img src="../assets/images/indexnav/6.gif" alt="" style="height: 20px;">
					 <div class="pl-1">小米之家</div>
				</div>
		  </template>
		</van-cell>
		<van-cell  is-link>
		  <template #title>
				<div class="d-flex a-center">
					 <img src="../assets/images/indexnav/7.gif" alt="" style="height: 20px;">
					 <div class="pl-1">更多功能</div>
				</div>
		  </template>
		</van-cell>
		<divdir></divdir>
		<van-cell  is-link  @click="setting">
		  <template #title>
				<div class="d-flex a-center">
					 <img src="../assets/images/indexnav/8.gif" alt="" style="height: 20px;">
					 <div class="pl-1">更多设置</div>
				</div>
		  </template>
		</van-cell>
	</div>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				covers: "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4128167029,2260318328&fm=26&gp=0.jpg"
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				loginStatus: state => state.login.loginStatus
			})
		},
		methods: {
			login() {
				this.$router.push({
					name: "Login"
				})
			},
			setting() {
				this.$router.push({
					name: "Setting"
				})
			}
		}
	}
</script>
<style scoped>
	.main-contanter {
		height: 216px;
		background-image: url(../assets/images/bg.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.headImg {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		border: 3px solid #FFFFFF;
		overflow: hidden;
	}

	.loginName {
		color: #FFFFFF;
	}

</style>
